<template>
  <div class="music_list">
    <Header title="歌手分类" go-back="true"></Header>
    <back-top></back-top>
    <div class="music_box">
      <tabs value="name1" type="line">
        <tab-pane label="入驻歌手" name="name1">
          <div class="tabs-container">
            <ul>
              <li v-for="(item1,index1) in singerInList" :key="index1" @click="goSinger(item1.id)">
                <div class="singer_head">
                  <img :src="item1.img1v1Url" alt="">
                </div>
                <p>{{item1.name}}</p>
              </li>
            </ul>
          </div>
        </tab-pane>
        <tab-pane label="华语男歌手" name="name2">
          <div class="tabs-container">
            <ul>
              <li v-for="(mal,index2) in maleList" :key="index2" @click="goSinger(mal.id)">
                <div class="singer_head">
                  <img :src="mal.img1v1Url" alt="">
                </div>
                <p>{{mal.name}}</p>
              </li>
            </ul>
          </div>
        </tab-pane>
        <tab-pane label="华语女歌手" name="name3">
          <div class="tabs-container">
            <ul>
              <li v-for="(fem,index3) in femaleList" :key="index3" @click="goSinger(fem.id)">
                <div class="singer_head">
                  <img :src="fem.img1v1Url" alt="">
                </div>
                <p>{{fem.name}}</p>
              </li>
            </ul>
          </div>
        </tab-pane>
        <tab-pane label="华语组合/乐队" name="name4">
          <div class="tabs-container">
            <ul>
              <li v-for="(band,index4) in bandList" :key="index4" @click="goSinger(band.id)">
                <div class="singer_head">
                  <img :src="band.img1v1Url" alt="">
                </div>
                <p>{{band.name}}</p>
              </li>
            </ul>
          </div>
        </tab-pane>
      </tabs>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import BackTop from '../../backtop/src/main'
import {getSingerIn, getMaleSinger, getfemaleSinger, getBand} from '../../../api/node'

export default {
  name: 'Child4Page5',
  data () {
    return {
      theme1: 'light',
      singerInList: [], // 入驻歌手
      femaleList: [], // 华语女歌手
      maleList: [], // 华语男歌手
      bandList: [] // 乐队组合
    }
  },
  created () {
    getSingerIn().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.singerInList = res.artists
      }
    })
    getMaleSinger().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.maleList = res.artists
      }
    })
    getfemaleSinger().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.femaleList = res.artists
      }
    })
    getBand().then(res => {
      if (res.code === 200) {
        this.bandList = res.artists
      }
    })
  },
  methods: {
    goSinger (id) {
      this.$router.push('/Singer/' + id)
    }
  },
  components: {
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.music_list{
  width: 100%;
  padding-top: 50px;
  .music_box{
    width: 100%;
    .tabs-container{
      width: 100%;
      ul{
        li{
          width: 100%;
          padding: 10px;
          display: inline-flex;
          align-items: center;
          border-bottom: 1px solid #f2f2f2;
          .singer_head{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          p{
            font-size: 15px;
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>
